﻿/* 多行表头表格视图
 *
 * 加入以下CSS, 增加多行表头的背景
 *.x-grid3-hd-row .x-grid3-cell{background:#f9f9f9 url(../images/extjs/grid3-hrow.gif) repeat-x 0 bottom;}
 *
 * m-为首行，n-为第二行，header指定为第三行
 * 指定-text则增加td，指定-cols则增加td的colspan属性，指定-rows则增加td的rowspan属性，noheader为true则最后一行不加td；指定-style则制定该表头的显示样式
 * 以上两个设置相互组合，如指定mtext, mrows, mcols, mstyle表示第一行表头增加以mstyle样式显示的内容为mtext，跨mrows行，mcols列的表头单元格
 *
 * 南智敏 2009-1-13 22:00
 */

Ext.ns('Ext.ux', 'Ext.ux.grid');
 
Ext.ux.grid.GridView=Ext.extend(Ext.grid.GridView,{
    renderHeaders : function(){
        var cm = this.cm, ts = this.templates;
        var ct = ts.hcell;
        // 此处 x-grid3-td-1的class是权益之计，可能导致bug
        ts.mhcell = new Ext.Template(
            ' <td class="x-grid3-hd x-grid3-cell  x-grid3-td-1" {colspan} {rowspan} style="{style}"> <div align="center" class="x-grid3-hd-inner"  unselectable="on">{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" /></div>',
            " </td>"
        );
        ts.mhrow = new Ext.Template(
            '<tr class="x-grid3-hd-row">{cells} </tr>'
        );
        ts.header = new Ext.Template(
            ' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
            ' <thead> {mrow} {nrow}' ,
            ' <tr class="x-grid3-hd-row">{cells} </tr> </thead>',
            " </table>"
    );
    var cb = [], sb = [], p = {},mcb=[], m={}, ncb=[], n={};   
    for(var i = 0, len = cm.getColumnCount(); i < len; i++){
        // 依据noheader值决定是否增加末行表头
        if(!cm.config[i].noheader){
            p.id = cm.getColumnId(i);
            p.value = cm.getColumnHeader(i) || "";
            p.style = this.getColumnStyle(i, true);
            p.tooltip = this.getColumnTooltip(i);
            if(cm.config[i].align == 'right'){
                p.istyle = 'padding-right:16px';
            }
            cb[cb.length] = ct.apply(p);
        }
        // 依据mtext值决定是否增加第一行表头
        if(cm.config[i].mtext){
            m.value = cm.config[i].mtext;
            m.colspan = cm.config[i].mcols ? 'colspan='+cm.config[i].mcols:'';
            m.rowspan = cm.config[i].mrows ? 'rowspan='+cm.config[i].mrows:'';
            m.style = cm.config[i].mstyle || '';
            mcb[mcb.length] = ts.mhcell.apply(m);
        }
        // 依据ntext值决定是否增加第二行表头
        if(cm.config[i].ntext){
            n.value = cm.config[i].ntext;
            n.colspan = cm.config[i].ncols ? 'colspan='+cm.config[i].ncols:'';
            n.rowspan = cm.config[i].nrows ? 'rowspan='+cm.config[i].nrows :'';
            n.style = cm.config[i].nstyle || '';
            ncb[ncb.length] = ts.mhcell.apply(n);
        }
    }
    var s=ts.header.apply({
        cells: cb.join(""), 
        tstyle:'width:'+this.getTotalWidth()+';',
        mrow: (mcb.length!=0)?ts.mhrow.apply({cells:mcb.join("")}):'',
        nrow:  (ncb.length!=0)?ts.mhrow.apply({cells:ncb.join("")}):''
    });
      return s;
  }
  
    // private 重载doRender是为了使表格支持跨行单元格
    ,doRender : function(cs, rs, ds, startRow, colCount, stripe){
        var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
        var tstyle = 'width:'+this.getTotalWidth()+';';
        // buffers
        var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
        for(var j = 0, len = rs.length; j < len; j++){
            r = rs[j]; cb = [];
            var rowIndex = (j+startRow);
            for(var i = 0; i < colCount; i++){
                c = cs[i];
                p.id = c.id;
                p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                p.attr = p.cellAttr = "";
                /* added start *//*
            	var value = r.data[c.name] ;
            	if (value && value.length > 5 && value.indexOf('$*#*$') > 0){
            		if (value.substr(value.indexOf('$*#*$') + 5) == 0) 
            			continue;
            		else 
            			p.attr = p.cellAttr = "rowspan=" + value.substr(5);
            	}*/
            	/* added end */
                p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
                p.style = c.style;
                if(p.value == undefined || p.value === "") p.value = "&#160;";
                if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
                    p.css += ' x-grid3-dirty-cell';
                }
                cb[cb.length] = ct.apply(p);
            }
            var alt = [];
            if(stripe && ((rowIndex+1) % 2 == 0)){
                alt[0] = "x-grid3-row-alt";
            }
            if(r.dirty){
                alt[1] = " x-grid3-dirty-row";
            }
            rp.cols = colCount;
            if(this.getRowClass){
                alt[2] = this.getRowClass(r, rowIndex, rp, ds);
            }
            rp.alt = alt.join(" ");
            rp.cells = cb.join("");
            buf[buf.length] =  rt.apply(rp);
        }
        return buf.join("");
    }
});